<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('地图')"/>
    <style>
        /*#container {width:300px; height: 180px; }*/
    </style>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cd01280d373a8325914caf8148381a32"></script>
</head>
<body >
<div id="container"></div>

<th:block th:include="include :: footer"/>
<script>
    var x,y,address;
    // x = 114.47097883083346
    // y = 38.00760043269055
    x = [[${x}]]
    y = [[${y}]]
	console.log(x,y)
    // address = [[${address}]];

    if(x == undefined || y == undefined){
    	$.modal.msgError("获取经纬度失败");
    }else{
		var map;
		var ponsition = [y,x];
		window.onLoad  = function(){
			map = new AMap.Map('container', {
				resizeEnable: true,
				center: ponsition,
				zoom: 18
			});
			var marker = new AMap.Marker({
				position:ponsition//位置
			})
			map.add(marker);//添加到地图
			var circleMarker = new AMap.CircleMarker({
				center:ponsition,
				radius:60,//3D视图下，CircleMarker半径不要超过64px
				strokeColor:'white',
				strokeWeight:2,
				strokeOpacity:0.5,
				fillColor:'rgba(0,0,255,1)',
				fillOpacity:0.5,
				zIndex:10,
				bubble:true,
				cursor:'pointer',
				clickable: true
			})
			circleMarker.setMap(map)
		}
		var url = 'https://webapi.amap.com/maps?v=1.4.15&key=cd01280d373a8325914caf8148381a32&callback=onLoad';
		var jsapi = document.createElement('script');
		jsapi.charset = 'utf-8';
		jsapi.src = url;
		document.head.appendChild(jsapi);

		$("#container").css({"width": "100%","height":"100%"})
    }

</script>
</body>
</html>
